<template>
	<view :style="{ height: statusBarHeight}" class="statusBar" />
</template>

<script>
	export default {
		name: 'cc-statusbar-placeholder',
		props: {
		},
		computed: {
		},
		data() {
			return {
				// #ifdef MP-WEIXIN
				statusBarHeight: this.computeStatusBarHeight() + 'rpx',
				// #endif
				// #ifndef MP-WEIXIN
				// statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
				// #endif

				// 状态栏高度
				// this.globalData.statusBarHeight = uni.getSystemInfoSync().statusBarHeight

				// #ifdef MP-WEIXIN
				// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
				// const custom = wx.getMenuButtonBoundingClientRect()
				// console.log(custom)

				// 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
				// this.globalData.navigationBarHeight = custom.height + (custom.top - this.globalData.statusBarHeight) * 2
				// console.log("导航栏高度："+this.globalData.navigationBarHeight)

				// 总体高度 = 状态栏高度 + 导航栏高度
				// this.globalData.navHeight = this.globalData.navigationBarHeight + this.globalData.statusBarHeight
				// #endif

			}
		},
		methods: {
			computeStatusBarHeight() {
				const scale = uni.upx2px(100) / 100; // 获取 100rpx 对应的 px 值比例
				return uni.getWindowInfo().statusBarHeight / scale;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.statusBar {
		top: 0rpx;
	}
</style>